<template>
  <van-list
    v-model="loading"
    :finished="finished"
    finished-text="没有更多了"
    :error.sync="error"
    error-text="加载失败请重试"
    :immediate-check="false"
    @load="onLoad"
    
  >
  <comment-item
  v-for="(item,index) in list"
  :key="index"
  :comment="item"
  @reply-click="$emit('reply-click',$event)"
  />
    <!-- <van-cell
      v-for="(item,index) in list"
      :key="index"
      :title="item.content"
    /> -->
  </van-list>
</template>

<script>
// 引入获取评论的方法
import {getComments} from '@/api/comment'
import CommentItem from './comment-item.vue'
export default {
  name: "CommentList",
  components: {
      CommentItem
  },
  props: { 
      source:{
          type:[Number, String, Object] ,
          required: true
      },
      list:{
        type:Array,
        default: () => []
      },
      // 新增type使其变成动态
      type:{
        type:String,
        validator (value) {
        return ['a', 'c'].includes(value)
      },//验证器函数
        default: 'a',//默认
      }
  },
  data() {
    return {
      loading: false,
      finished: false,
      offset: null, // 获取下一页数据的标记 (分页，从哪开始取这页数据)
      limit: 10,// (分页，每页多少条)
      error: false
    /*
    分页总结：
    pageNum 页码，pageSize 每页条目数
    page	页码，perPage  每页条目数
    timestamp 时间戳 ， 每页条目数服务器控制
    offset 获取下一页数据的标记 ， limit 每页限制显示多少条
    */   
    };
  },
  computed: {},
  watch: {},
  created() {
      this.loading=true
      this.onLoad()
  },
  mounted() {},
  methods: {
    async onLoad() {
        try{
            //   获取数据
            const {data} = await getComments({
                type:this.type,
                source:this.source.toString(),//文章id需要自己手动加上id否者会在 source两边加上引号变得不像有效的整形
                offset:this.offset,//// 获取评论数据的偏移量，值为评论id，表示从此id的数据向后取，不传表示从第一页开始读取数据
                limit:this.limit,//每页多少条
            })
            // console.log(data);
            // 获取到数据传给父组件帮助评论总数的显示
            this.$emit('onload-success',data.data)
            // 2.将数据添加到列表中
            const {results} = data.data
            this.list.push(...results)
            // 3.将loading设置为false
            this.loading = false
            // 4.判断是否有值没
            if (results.length) {
                // 有值更新下一页数据
                this.offset=data.data.last_id
            }else{
                // 没有关闭finished
                this.finished=true
            }
        }catch(e){
            this.error=true
            this.loading=false
        }  
    }
  }
};
</script>

<style scoped lang="less">
</style>